<div class="row heading">
  <div class="small-12 title-heading">
    <h1 class="bold">{{astroboxName}} · Settings</h1>
  </div>
</div>

<div class="row collapse container">
  <div class="hide-for-small-only medium-5  large-4 columns">
    <div id="settings-side-bar">
      <ul class="side-nav bold">
        <li class="heading"><i class="icon-3d-printer"></i> 3D Printer</li>
        {% if mfDefinition.variant.printer_profile_edit %}
          <li class="active printer-connection"><a href="#settings/printer-connection">Connection</a></li>
          <li class="printer-profile"><a href="#settings/printer-profile">Profile</a></li>
        {% endif %}
        <li class="info"><a href="#settings/filament-info">Filament Info</a></li>
        <li class="temperature-presets"><a href="#settings/temperature-presets">Temperature Presets</a></li>
        {% if mfDefinition.variant.allow_camera_settings %}
          <li class="heading"><i class="icon-camera"></i> Camera</li>
          <li class="video-stream"><a href="#settings/video-stream">Image/Video</a></li>
        {% endif %}
        <li class="heading"><i class="icon-signal"></i>Network</li>
        <li class="network-name"><a href="#settings/network-name">Name</a></li>
        <li class="internet-connection"><a href="#settings/internet-connection">Internet</a></li>
        <li class="wifi-hotspot"><a href="#settings/wifi-hotspot">WiFi Hotspot</a></li>
        <li class="heading"><i class="icon-cog"></i> Software</li>
        <li class="software-plugins"><a href="#settings/software-plugins">Apps &amp; Plugins</a></li>
        <li class="software-license"><a href="#settings/software-license">License</a></li>
        <li class="software-update"><a href="#settings/software-update">Update</a></li>
        <li class="software-advanced"><a href="#settings/software-advanced">Advanced</a></li>
      </ul>
    </div>
  </div>
  <div class="small-12 medium-7 large-8 columns">

    {% if mfDefinition.variant.printer_profile_edit %}
      <div class="show-for-small zebra">
        <a href="#settings/printer-connection"><h1 class="bold" align="center">3D Printer Connection</h1></a>
      </div>
      <div id="printer-connection" class="settings-page">
        <div class="row connection-status clearfix">
          <div class="small-12 columns arcade-backg">
            <span class="connecting"><i class="icon-rocket-spinner animate-spin"></i> Connecting...</span>
            <span class="failed"><i class="icon-attention"></i> No connection to printer.</span>
            <span class="connected"><i class="icon-3d-printer"></i> Connected to printer.</span>
          </div>
        </div>
        <form></form>
      </div>

      <script type="text/template" id="printer-connection-settings-page-template">
        <div class="row clearfix">
          <div class="small-12 columns text-center">
          <hr>
            <label class="bold">
              Printer Communications Driver
              <p><%= settings.driverName %> (<a href="#settings/printer-profile"> <i class="icon-exchange"></i><b>change</b></a>)</p>
            </label>
            <label for="settings-serial-port" class="bold">
              USB Device (<a href="#" class="retry-ports bold"><i class="icon-refresh"></i> Re-scan</a>)
              <% if (settings.serial.portOptions.length > 0) { %>
                <% if (settings.serial.portOptions.length > 1) { %>
                  <select id="settings-serial-port" name="port">
                    <% _.each(settings.serial.portOptions, function(e) { %>
                      <option value="<%= e[0] %>"<%= settings.serial.port == e[0] ? ' selected' : '' %>><%= e[1] %></option>
                    <% }) %>
                  </select>
                <% } else { %>
                  <% var e = settings.serial.portOptions[0] %>
                  <input type="hidden" value="<%= e[0] %>" name="port"/>
                  <p><%= e[1] %></p>
                <% } %>
              <% } else { %>
                <p>
                No printer detected. Is your printer plugged in?<br/>
                <a href="#" class="retry-ports bold">Plug printer and retry &raquo; </a>
                </p>
              <% } %>
            </label>
          </div>
        </div>
        <% if (settings.serial.portOptions.length > 0 && settings.serial.baudrateOptions.length > 0) { %>
          <div class="row">
            <div class="small-12">
              <label for="settings-baudrate" class="bold">Baud Rate
              <% if (settings.serial.baudrateOptions.length > 1) { %>
                <select id="settings-baudrate" name="baudrate">
                  <% _.each(settings.serial.baudrateOptions, function(e) { %>
                    <option value="<%= e %>"<%= settings.serial.baudrate == e ? ' selected' : '' %>><%= e %></option>
                  <% }) %>
                </select>
              <% } else { %>
                <input type="hidden" value="<%= settings.serial.baudrateOptions[0] %>" name="baudrate"/>
                <p><%= e %></p>
              <% } %>
              </label>
            </div>
          </div>
        <% } %>
        <% if (settings.serial.portOptions.length > 0)  { %>
          <div align="center">
            <div class="loading-button connect">
              <button class="success round">Connect</button>
              <span class="button disabled radius success loading">Connecting...</span>
            </div>
            <div class="loading-button cancel">
              <button class="alert round">Cancel</button>
              <span class="button disabled radius alert loading">Canceling...</span>
            </div>
            <div class="loading-button disconnect">
              <button class="alert round">Disconnect</button>
              <span class="button disabled radius alert loading">Disconnecting...</span>
            </div>
            <div class="loading-button reconnect">
              <button class="success round">Re-connect</button>
              <span class="button disabled radius success loading">Re-connecting...</span>
            </div>
          </div>
        <% } %>
      </script>

      <div class="show-for-small zebra">
        <a href="#settings/printer-profile"><h1 class="bold" align="center">3D Printer Profile</h1></a>
      </div>
      <div id="printer-profile" class="settings-page hide">
        <script type="text/template" id="printer-profile-settings-page-template">
          <div class="row clearfix">
            <div class="small-12">
              <form data-abide="ajax">

                <div class="clearfix text-right save-profile">
                  <div class="loading-button right">
                    <button class="success radius">Save Profile</button>
                    <span class="loading button radius success disabled"><i class="icon-rocket-spinner animate-spin"></i> Saving...</span>
                  </div>
                </div>

                <hr>
                <div class="row clearfix">
                  <label class=" columns small-12 bold text-left">Printer Model</label>
                  <% if (!settings.printer_model.name) { %>
                    {% if not mfDefinition.variant.printer_selection_hidden %}
                    <div class="column small-12">
                        <a class="button radius add-printer tiny change-printer"><i class="icon-plus"></i> Add Printer</a>
                      </div>
                    {% endif %}
                  <% } %>
                  <div class="column small-8">
                    <% if (settings.printer_model.name) { %>
                      <h4 id="printer-name" data-id="<%= settings.printer_model.id %>"><%= settings.printer_model.name %></h4>
                    <% } %>
                  </div>
                  <% if (settings.printer_model.name) { %>
                    {% if not mfDefinition.variant.printer_selection_hidden %}
                    <div class="column small-2">
                        <a class="button radius tiny right success change-printer"><b>Change</b></a>
                      </div>
                    <div class="column small-2">
                      <a class="button radius tiny right alert unlink-printer"><b>Unlink</b></a>
                    </div>
                    {% endif %}
                  <% } %>
                </div>

                <div class="row clearfix">
                  <div class="column">
                    <label for="settings-printer-driver" class="bold">
                      Driver
                      <select id="settings-printer-driver" name="driver">
                        <% _.each(driverChoices, function(p, k) { %>
                          <option value="<%= k %>" <%= settings.driver == k ? 'selected' : '' %>><%= p.name %></option>
                        <% }) %>
                      </select>
                    </label>
                  </div>
                </div>

                <div class="row clearfix">
                  <div class="column medium-6">
                  <label for="extruder-count" class="bold">
                      No. of Extruders
                    </label>
                    <select id="extruder-count" name="extruder_count">
                      <option value='1'>1</option>
                      <option value='2'>2</option>
                      <option value='3'>3</option>
                      <option value='4'>4</option>
                    </select>
                  </div>

                  <div class="medium-6 column text-center">
                    <label for="heated-bed" class="bold">Heated Bed</label>
                    <div class="switch radius danger">
                      <input id="heated-bed" name="heated_bed" type="checkbox" <% if (settings.heated_bed) { %> value="yes" checked<% } %>>
                      <label for="heated-bed"></label>
                    </div>
                  </div>

                  <div class="clearfix"></div>

                  <div class="input-wrapper column small-6">
                    <label for="max-nozzle-temp" class="bold text-left">
                      Max. Nozzle Temperature
                    </label>
                    <div class="row clearfix collapse">
                      <div class="small-9 columns">
                        <input id="max-nozzle-temp" name="max_nozzle_temp" type="text" value="<%= settings.max_nozzle_temp %>" required pattern="integer"/>
                        <small class="error">Invalid Nozzle Temperature.</small>
                      </div>
                      <div class="small-3 columns"><span class="postfix">&deg;C</div>
                    </div>
                  </div>

                  <div class="input-wrapper text-center small-6 column max_bed_temp<% if (!settings.heated_bed) { %> hide<% } %>">
                    <label for="max-bed-temp" class="bold text-left">Max. Bed Temperature</label>
                    <div class="row collapse">
                      <div class="small-9 columns">
                        <input id="max-bed-temp" name="max_bed_temp" type="text" value="<%= settings.max_bed_temp %>" required pattern="integer"/>
                        <small class="error">Invalid Bed Temperature.</small>
                      </div>
                      <div class="small-3 columns"><span class="postfix">&deg;C</div>
                    </div>
                  </div>
                </div>

                <div class="row movement clearfix">

                  <label class="bold column">Movement</label>
                  <div class="medium-4 text-center columns">
                    <div class="bold"><i class="icon-x-axis"></i> X</div>
                    <div class="toggle">
                      <span class="side-label">Head Moves</span>
                      <span class="switch radius">
                        <input id="invert-x" name="invert_x" type="checkbox" value="yes" <% if(settings.invert_x) { %> checked <% } %>>
                        <label for="invert-x"></label>
                      </span>
                      <span class="side-label">Bed Moves</span>
                    </div>
                  </div>

                  <div class="medium-4 text-center columns">
                    <div class="bold"><i class="icon-y-axis"></i> Y</div>
                    <div class="toggle">
                      <span class="side-label">Head Moves</span>
                      <span class="switch radius">
                        <input id="invert-y" name="invert_y" type="checkbox" value="yes" <% if(settings.invert_y) { %> checked <% } %>>
                        <label for="invert-y"></label>
                      </span>
                      <span class="side-label">Bed Moves</span>
                    </div>
                  </div>

                  <div class="medium-4 text-center columns">
                    <div class="bold"><i class="icon-z-axis"></i> Z</div>
                    <div class="toggle">
                      <span class="side-label">Head Moves</span>
                      <span class="switch radius">
                        <input id="invert-z" name="invert_z" type="checkbox" value="yes" <% if(settings.invert_z) { %> checked <% } %>>
                        <label for="invert-z"></label>
                      </span>
                      <span class="side-label">Bed Moves</span>
                    </div>
                  </div>

                </div>

                <div class="input-wrapper cancel-gcode<% if (!driverChoices[settings.driver].properties.customCancelCommands) { %> hide<% } %>">
                  <label for="cancel-gcode" class="bold">
                    Cancel GCODE
                  </label>
                  <textarea id="cancel-gcode" name="cancel_gcode" placeholder="G28 X Y"><%= settings.cancel_gcode.join('\n') %></textarea>
                </div>


              </form>
            </div>
          </div>
        </script>
      </div>
    {% endif %}

    <div id="filament-info" class="settings-page hide">
      <script type="text/template" id="filament-info-page-template">

              <div class="row clearfix">
                <label class=" columns small-12 bold text-center">Filament Info</label>
                <% if (!settings.filament.name) { %>
                  <div class="column small-12 text-center">
                    <i class="icon-filament"></i>
                  </div>
                  <div class="column small-12 text-center">
                    <a class="button radius add-filament tiny change-filament"><i class="icon-plus"></i> Add filament information</a>
                  </div>
                <% } %>
                <% if (settings.filament.name) { %>
                  <div class="column small-12 text-center">
                    <i class="icon-filament" style="color:<%= settings.filament.color%>"></i>
                  </div>
                  <div class="column small-12 text-center">
                    <h4 id="filament-name" data-name="<%= settings.filament.name%>" data-color="<%= settings.filament.color%>"><%= settings.filament.name %></h4>
                  </div>
                  <div class="column small-6 text-right">
                    <a class="button radius tiny alert unlink-filament"><b>Unlink info</b></a>
                  </div>
                  <div class="column small-6 text-left">
                    <a class="button radius tiny dark change-filament"><b><i class="icon-pencil"></i> Edit</b></a>
                  </div>

                <% } %>
              </div>

      </script>
    </div>

    <div class="show-for-small zebra temperature-presets">
      <a href="#settings/temperature-presets"><h1 class="bold" align="center">Temperature Presets</h1></a>
    </div>

    <div id="temperature-presets" class="settings-page hide text-center">
      <script type="text/template" id="temperature-presets-settings-page-template">
        <div class="loading-button new-preset">
           <button class="alert radius"><i class="icon-plus"></i>New Temperature Preset</button>
        </div>
        <div class="row element-list">
          <h5 class="bold">Saved Temperature Presets</h5>
          <% _.each(temp_presets, function(t, key){ %>
            <div class="row stored-presets text-left" data-id="<%= key %>" data-preset-name="<%= t.name %>">
              <div class="small-12 large-6 columns name">
                <%= t.name %>
              </div>
              <div class="small-4 large-2 columns extruder-temp" align="center">
                <img class="icon-extruder" src="img/icon-extruder.svg">
                <b><%= t.nozzle_temp %>º</b>
              </div>
              <div class="small-4 large-2 columns bed-temp left" align="center">
                <% if (heated_bed) { %>
                  <img class="icon-bed" src="img/icon-bed.svg">
                  <b><%= t.bed_temp %>º</b>
                <% } %>
              </div>
              {% if mfDefinition.variant.temperature_presets_edit %}
                <div class="small-4 large-2 columns no-padding" align="center">
                  <a title="Edit" class="edit-preset"><i class="icon-pencil"></i></a>
                  <% if (Object.keys(temp_presets).length > 1) { %>
                    <a title="Remove" class="delete-preset"><i class="icon-trash"></i></a>
                  <% } %>
                </div>
              {% else %}
              <% if (!t.manufacturer_id) { %>
                <div class="small-4 large-2 columns no-padding" align="center">
                  <a title="Edit" class="edit-preset"><i class="icon-pencil"></i></a>
                  <% if (Object.keys(temp_presets).length > 1) { %>
                    <a title="Remove" class="delete-preset"><i class="icon-trash"></i></a>
                  <% } %>
                </div>
              <% } %>
              {% endif %}
            </div>
          <% }) %>
        </div>
      </script>
    </div>

    <div id="delete-stored-temperature-preset-modal" class="reveal-modal medium radius" data-reveal>
      <h2 class="bold">Delete Stored Temperature Preset</h2>
      <div class="modal-body">
        <p>
          This will delete the <span class="name bold"></span> stored data.
        </p>
        <p>
          Are you sure you want to delete <span class="name bold"></span> temperature preset?
        </p>
      </div>
      <div class="modal-actions row">
        <div class="small-12 medium-6 columns">
          <button class="secondary radius expand">Cancel</button>
        </div>
        <div class="small-12 medium-6 columns">
          <div class="loading-button expand">
            <button class="alert radius">Delete Temperature Preset</button>
            <span class="button disabled alert radius loading"><i class="icon-rocket-spinner animate-spin"></i> Deleting...</span>
          </div>
        </div>
      </div>
      <a class="close-reveal-modal">&#215;</a>
    </div>

    <div id="add-preset-modal" class="reveal-modal medium radius" data-reveal align="center">
      <script type="text/template" id="temperature-presets-add-modal">
        <h2 class="bold">
          <% if (preset) { %>Edit Temperature Preset <% } %>
          <% if (!preset) { %>New Temperature Preset <% } %>
        </h2>
        <div class="modal-actions row">
          <div class="small-12 medium-10 large-6 medium-centered columns">
            <form data-abide="ajax" id="preset-form">
              <div class="input-wrapper">
                <label for="temperature-preset-name" class="bold">
                  Temperature Preset Name
                </label>
                <input id="temperature-preset-name" name="name" type="text" required pattern autocomplete="off"/>
                <small class="error">Please provide a name</small>
              </div>
              <div class="input-wrapper">
                <label for="preset-nozzle-temp" class="bold">
                  Nozzle Temperature
                </label>
                <div class="row collapse">
                  <div class="small-3 columns">
                    <img class="icon-extruder" src="img/icon-extruder-active.svg">
                  </div>
                  <div class="small-5 columns">
                    <input id="preset-nozzle-temp" name="preset-nozzle-temp" type="number"  required pattern="integer"/>
                    <small class="error">Invalid Nozzle Temperature.</small>
                  </div>
                  <div class="small-2 left columns"><span class="postfix">&deg;C</div>
                </div>
              </div>
              <% if (bed) { %><div class="input-wrapper">
                <label for="preset-bed-temp" class="bold">
                  Bed Temperature
                </label>
                <div class="row collapse">
                  <div class="small-3 columns">
                      <img class="icon-bed" src="img/icon-bed.svg">
                  </div>
                  <div class="small-5 columns">
                    <input id="preset-bed-temp" name="preset-bed-temp" type="number" required pattern="integer"/>
                    <small class="error">Invalid Bed Temperature.</small>
                  </div>
                  <div class="small-2 left columns"><span class="postfix">&deg;C</div>
                </div>
              </div> <% } %>
              <div class="loading-button cancel-add-preset small-12 large-5">
                <span class="button cancel secondary radius expand">Cancel</span>
              </div>
              <div class="loading-button small-12 large-5">
                <button class="success radius expand">Save</button>
                <span class="loading button radius success disabled"><i class="icon-rocket-spinner animate-spin"></i> Saving...</span>
              </div>
            </form>
          </div>
        </div>
      </script>
      <a class="close-reveal-modal">&#215;</a>
    </div>

    {% if mfDefinition.variant.allow_camera_settings %}
      <div class="show-for-small zebra camera">
        <a href="#settings/video-stream"><h1 class="bold" align="center">Image/Video</h1></a>
      </div>
      <div id="video-stream" class="settings-page hide">
        <script type="text/template" id="video-stream-settings-page-template">
          <% if (this.cameraName && settings && settings.structure) { %>
            <div class="text-center">
              <label class="bold"><%= this.cameraName %></label>
              <div id="buttonRefresh" class="loading-button still">
                <div class="still-camera">
                  <button class="success radius spin">Re-scan for plugged camera</i></button>
                  <span class="button success radius loading disabled"><i class="icon-rocket-spinner animate-spin"></i></span>
                </div>
              </div>
            </div>
            <hr>
            <% if(!this.videoSettingsError) { %>
              <div class="row">
                <div class="small-12">
                  <form>
                    <% if (settings.structure.busSource && settings.structure.busSource.length > 0) { %>
                      <label for="video-stream-format" class="bold">
                        Camera Type
                      </label>
                      <% if (settings.structure.busSource.length > 1) { %>
                        <select id="video-stream-source" name="source">
                          <% _.each(settings.structure.busSource, function(v) { %>
                            <option value="<%= v.value %>" <%= settings.source == v.value ? 'selected' : '' %>><%= v.label %></option>
                          <% }) %>
                        </select>
                      <% } else { %>
                        <div class="field-value"><%= settings.structure.source[0].label %></div>
                        <input type="hidden" name="source" value="<%= settings.structure.source[0].value %>"/>
                      <% } %>
                    <% } %>
                    <% if (settings.structure.cameraOutput.length > 0) { %>
                      <label for="camera-output-format" class="bold">
                        Camera Ouput Format
                      </label>
                      <% if (settings.structure.cameraOutput.length > 1) { %>
                        <select id="camera-output-format" name="format">
                          <% _.each(settings.structure.cameraOutput, function(v) { %>
                            <option value="<%= v.value %>" <%= settings.format == v.value ? 'selected' : '' %>><%= v.label %></option>
                          <% }) %>
                        </select>
                      <% } else { %>
                        <div class="field-value"><%= settings.structure.cameraOutput[0].label %></div>
                        <input type="hidden" name="format" value="<%= settings.structure.cameraOutput[0].value %>"/>
                      <% } %>
                    <% } %>
                    <% if (settings.structure.videoEncoding.length > 0) { %>
                      <label for="video-stream-format" class="bold">
                        Video Stream Encoding
                      </label>
                      <% if (settings.structure.videoEncoding.length > 1) { %>
                        <select id="video-stream-encoding" name="encoding">
                          <% _.each(settings.structure.videoEncoding, function(v) { %>
                            <option value="<%= v.value %>" <%= settings.encoding == v.value ? 'selected' : '' %>><%= v.label %></option>
                          <% }) %>
                        </select>
                      <% } else { %>
                        <div class="field-value"><%= settings.structure.videoEncoding[0].label %></div>
                        <input type="hidden" name="encoding" value="<%= settings.structure.videoEncoding[0].value %>"/>
                      <% } %>
                    <% } %>
                    <% if (settings.structure.frameSizes.length > 0) { %>
                      <label for="video-stream-size" class="bold">
                        Image Resolution
                      </label>
                      <% if (settings.structure.frameSizes.length > 1) { %>
                        <select id="video-stream-size" name="size">
                          <% _.each(settings.structure.frameSizes, function(v) { %>
                            <option value="<%= v.value %>" <%= settings.size == v.value ? 'selected' : '' %>><%= v.label %></option>
                          <% }) %>
                        </select>
                      <% } else { %>
                        <div class="field-value"><%= settings.structure.frameSizes[0].label %></div>
                        <input type="hidden" name="size" value="<%= settings.structure.frameSizes[0].value %>"/>
                      <% } %>
                    <% } %>
                    <% if (settings.structure.video_rotation.length > 0) { %>
                      <label for="video-rotation" class="bold">
                        Image Rotation
                      </label>
                      <select id="video-rotation" name="video_rotation">
                        <% _.each(settings.structure.video_rotation, function(r) { %>
                          <option value="<%= r.value %>" <%= settings.video_rotation == r.value ? 'selected' : '' %>><%= r.label %></option>
                        <% }) %>
                      </select>
                    <% } %>
                    <% if (settings.structure.fps.length > 0) { %>
                      <label for="video-stream-framerate" class="bold">
                        Video Stream Frame Rate
                      </label>
                      <% if (settings.structure.fps.length > 1) { %>
                        <select id="video-stream-framerate" name="framerate">
                          <% _.each(settings.structure.fps, function(v) {
                              if(v.resolution == settings.size) { %>
                                <option value="<%= v.value %>" <%= settings.framerate == v.value ? 'selected' : '' %>><%= v.label %></option>
                          <%    }
                            }) %>
                        </select>
                      <% } else { %>
                        <div class="field-value"><%= settings.structure.fps[0].label %></div>
                        <input type="hidden" name="framerate" value="<%= settings.structure.fps[0].value %>"/>
                      <% } %>
                    <% } %>
                    <hr/>
                    <div class="loading-button">
                      <button class="success radius">Save</button>
                      <span class="loading button radius success disabled"><i class="icon-rocket-spinner animate-spin"></i> Saving...</span>
                    </div>
                  </form>
                </div>
              </div>
            <% } else { %>
              <div class="error-message" align="center">
                <i class="icon-attention"></i><br/>
                <p class="bold"><%= this.videoSettingsError %></p>
              </div>
            <% } %>
          <% } else { %>
            <div class="text-center no-camera">
              <i class="icon-attention"></i>
              <label class="bold">No Camera Found</label>
              <div id="buttonRefresh" class="loading-button still">
                <div class="still-camera">
                  <button class="success radius spin">Scan for Cameras</i></button>
                  <span class="button success radius loading disabled"><i class="icon-rocket-spinner animate-spin"></i></span>
                </div>
              </div>
            </div>
          <% } %>
        </script>
      </div>
    {% endif %}

    <div class="show-for-small zebra">
      <a href="#settings/network-name"><h1 class="bold" align="center">Network Name</h1></a>
    </div>
    <div id="network-name" class="settings-page hide"></div>
    <script type="text/template" id="network-name-settings-page-template">
      <div class="row">
        <div class="small-12">
          <form data-abide="ajax">
            <div class="input-wrapper">
              <label for="network-name" class="bold">
                Network Name
              </label>
              <input id="network-name" name="name" type="text" value="<%= settings.name %>" required pattern="hostname" autocomplete="off"/>
              <small class="error">Invalid Device Name: use letters, numbers or dashes(-) only.</small>
            </div>
            <p>
              A few important things to remember:
            </p>
            <ul class="preview">
              <li><i class="icon-signal"></i> Hotspot WiFi name: <span class="network-name bold"><%= settings.name %></span></li>
              <li><i class="icon-link"></i> {{mfDefinition.variant.product_name}} URL: http://<span class="network-name bold"><%= settings.name %></span>.local</li>
            </ul>
            <hr/>
            <div class="loading-button right">
              <button class="success radius">Save</button>
              <span class="loading button radius success disabled"><i class="icon-rocket-spinner animate-spin"></i> Saving...</span>
            </div>
          </form>
        </div>
      </div>
    </script>

    <div class="show-for-small zebra">
      <a href="#settings/internet-connection"><h1 class="bold" align="center">Internet Connection</h1></a>
    </div>

    <div id="internet-connection" class="settings-page hide"></div>
    <div id="wifi-network-list-modal" class="reveal-modal medium radius" data-reveal align="center">
      <h2 class="bold">Select a WiFi Network</h2>
      <div class="modal-content"></div>
      <div class="modal-actions row">
        <div class="small-12 medium-6 medium-centered columns">
          <button class="secondary radius expand" onclick="$('#wifi-network-list-modal').foundation('reveal', 'close')">Cancel</button>
        </div>
      </div>
      <a class="close-reveal-modal">&#215;</a>
    </div>

    <div id="wifi-network-password-modal" class="reveal-modal medium radius" data-reveal>
      <script type="text/template" id="wifi-network-password-modal-template">
        <% if (wifi.wep) { %>
          <h2 class="bold" align="center">WEP Security Deprecated</h2>
          <div class="modal-body">
            <p>
              The <%= wifi.name %> WiFi network seems to be configured to use WEP security.
            </p>
            <p>
              WiFI WEP Security was <a href="https://en.wikipedia.org/wiki/Wired_Equivalent_Privacy" target="_info">deprecated in 2004</a>
              and is <b>not considered safe</b>, please configure your WiFi network to use WPA or WPA2.
            </p>
          </div>
          <div class="modal-actions row">
            <div class="small-12 medium-6 medium-centered columns">
              <button class="secondary radius cancel expand" onclick="$('#wifi-network-password-modal').foundation('reveal', 'close')">Close</button>
            </div>
          </div>
        <% } else { %>
          <h2 class="bold" align="center">WiFi Password</h2>
          <div class="modal-body">
            <p align="center">Enter the password for <span class="name bold"><%= wifi.name %></span>.</p>
            <form>
              <input type="hidden" class="network-id-field" name="id" value="<%= wifi.id %>">
              <input type="password" class="network-password-field" name="password"/>
            </form>
            <label for="show-password">
              <input type="checkbox" id="show-password"/>
              Show Password
            </label>
          </div>
          <div class="modal-actions row">
            <div class="small-12 medium-6 columns">
              <button class="secondary radius cancel expand" onclick="$('#wifi-network-password-modal').foundation('reveal', 'close')">Cancel</button>
            </div>
            <div class="small-12 medium-6 columns">
              <div class="loading-button expand">
                <button class="radius success connect">Connect</button>
                <span class="loading button success disabled radius">
                  <i class="icon-rocket-spinner animate-spin"></i> Please be patient...
                </span>
              </div>
            </div>
          </div>
        <% } %>
      </script>
    </div>

    <script type="text/template" id="internet-connection-settings-page-template">
      <div class="connection">
        <% if (settings.networks.wired) { %>
          <h3 class="bold">Wired Connection</h3>
          <i class="icon-ethernet"> Connected.</i>
          <div class="ip-address">IP Address: <b class="selectable"><%= settings.networks.wired.ip %></b></div>
          <div class="ip-address">Mac Address: <b class="selectable"><%= settings.networks.wired.mac %></b></div>
        <% } %>
      </div>
      <hr/>
      <% if (settings.networks.manual) { %>
        <h3 class="bold">Manually Configured</h3>
        <div>Interface: <b><%= settings.networks.manual.interface %></b></div>
        <div class="ip-address">IP Address: <b class="selectable"><%= settings.networks.manual.ip %></b></div>
        <div class="ip-address">Mac Address: <b class="selectable"><%= settings.networks.manual.mac %></b></div>
      <% } %>
      <% if (settings.hasWifi) { %>

        <div class="connection">
          <h3 class="bold">Wireless Connection</h3>

          <div class="row clearfix collapse">
            <div class="loading-button list-networks right small-12 medium-4 columns">
              <button class="radius small">Scan WiFi networks</button>
              <span class="loading button disabled radius small">
                <i class="icon-rocket-spinner animate-spin"></i> Looking for Networks...
              </span>
            </div>

            <div class="small-12 medium-8 columns">
              <% if (settings.networks.wireless) { %>
                <% if (settings.networks.wireless.signal < 33) { %>
                  <div class="connected">
                    <img class="wifi" src="static/img/icon-signal-low.svg">Connected to <b><%= settings.networks.wireless.name %></b>.
                  </div>
                <% } else if (settings.networks.wireless.signal > 33 && settings.networks.wireless.signal < 66) { %>
                  <div class="connected">
                    <img class="wifi" src="static/img/icon-signal-med.svg">Connected to <b><%= settings.networks.wireless.name %></b>.</i>
                  </div>
                <% } else { %>
                  <div class="connected">
                    <img class="wifi" src="static/img/icon-signal-high.svg">Connected to <b><%= settings.networks.wireless.name %></b>.</i>
                  </div>
                <% } %>
                <div class="ip-address">IP Address: <b class="selectable"><%= settings.networks.wireless.ip || '- -'  %></b></div>
                <div class="ip-address">Mac Address: <b class="selectable"><%= settings.networks.wireless.mac || '- -' %></b></div>
              <% } else { %>
                <div class="not-connected bold"><img src="/img/no-internet-icon.png" /> Not Connected.</div>
              <% } %>
            </div>
          </div>

        </div>
      <% } %>
      <% if (settings.storedWifiNetworks.length > 0) { %>
        <div class="stored-wifis element-list">
          <h5>Known WiFi Networks</h5>
          <% _.each(settings.storedWifiNetworks, function(c) { %>
            <div class="clearfix row<%= c.active ? ' active' : '' %>" data-id="<%= c.id %>">
              <div class="columns small-2 large-1 text-center active">
                <img class="wifi" src="static/img/icon-signal-high.svg">
              </div>
              <div class="columns small-8 large-10 name">
                <%= c.name %>
              </div>
              <div class="columns small-2 large-1 action">
                <a href="" title="Delete Network"><i class="icon-trash"></i></a>
              </div>
            </div>
          <% }) %>
        </div>
      <% } %>
      <% if (settings.networkDeviceInfo) { %>
        <hr/>
        <h3 class="bold">Network Devices</h3>
        <div class="element-list">
          <% _.each(settings.networkDeviceInfo, function(d) { %>
            <% if (d.type == 'wired') { %>
              <% if (d.connected) { %>
                <i class="icon-ethernet"> <b><%= d.id %></b> (Connected)</i>
              <% } else { %>
                <i class="icon-ethernet bold inactive"> <%= d.id %> </i>
              <% } %>
            <% } else { %>
              <% if (d.connected) { %>
                <div class="connected">
                  <img class="wifi" src="static/img/icon-signal-high.svg"> <b><%= d.id %></b> (Connected)
                </div>
              <% } else { %>
                <img class="wifi inactive" src="static/img/icon-signal-high.svg"> <b><%= d.id %></b>
              <% } %>
            <% } %>
            <div class="device-info">Mac Address: <span class="selectable"><%= d.mac %></span></div>
            <br>
          <% }) %>
        </div>
      <% } %>
    </script>

    <div id="delete-stored-wifi-modal" class="reveal-modal medium radius" data-reveal>
      <h2 class="bold">Delete Stored WiFi Network</h2>
      <div class="modal-body">
        <p>
          This will delete the stored WiFi Network <span class="name bold"></span>. Your box won't be able to automatically connect to it again.
        </p>
        <p class="active panel">
          This is your <b>active network</b>, please ensure your hotspot is on or a wired connection exists before deleting or you might not be able
          to connect to your box after deletion.
        </p>
        <p>
          Are you sure you want to delete <span class="name bold"></span>?
        </p>
      </div>
      <div class="modal-actions row">
        <div class="small-12 medium-6 columns">
          <button class="secondary radius expand">Cancel</button>
        </div>
        <div class="small-12 medium-6 columns">
          <div class="loading-button expand">
            <button class="alert radius">Delete Network</button>
            <span class="button disabled alert radius loading"><i class="icon-rocket-spinner animate-spin"></i> Deleting...</span>
          </div>
        </div>
      </div>
      <a class="close-reveal-modal">&#215;</a>
    </div>

    <script type="text/template" id="wifi-network-modal-row">
      <table>
      <% _.each(networks, function(n, idx) { %>
        <tr>
          <td>
            <% if (n.signal < 33) { %>
              <img class="wifi" src="static/img/icon-signal-low.svg">
            <% } else if (n.signal > 33 && n.signal < 66) { %>
              <img class="wifi" src="static/img/icon-signal-med.svg">
            <% } else { %>
              <img class="wifi" src="static/img/icon-signal-high.svg">
            <% } %>
            <% if (n.secured) { %><i class="icon-lock"></i><% } %>
          </td>
          <td class="network-name"><%= n.name %></td>
          <td>
            <% if (n.active) { %>
              <div class="active-network"><i class="icon-exchange"></i> Connected</div>
            <% } else { %>
              <div class="loading-button">
                <button class="radius success tiny" data-id="<%= idx %>">Connect</button>
                <span class="loading button disabled success tiny radius">
                  <i class="icon-rocket-spinner animate-spin"></i> Please be patient...
                </span>
              </div>
            <% } %>
          </td>
        </tr>
      <% }); %>
      </table>
    </script>

    <div class="show-for-small zebra">
      <a href="#settings/wifi-hotspot"><h1 class="bold" align="center">WiFi Hotspot</h1></a>
    </div>
    <div id="wifi-hotspot" class="settings-page hide"></div>
    <script type="text/template" id="wifi-hotspot-settings-page-template">
      <% if (settings.hotspot === false) { %>
        <div class="text-center no-hotspot">
          <i class="icon-attention"></i>
          <h4 class="bold">Creating a Hotspot is not supported on this device</h4>
        </div>
      <% } else { %>
        <h3 class="bold">Local Hotspot</h3>
        <div>
          <% if (settings.hotspot.active) { %>
            <h4>Running a hotspot on <b><%= settings.hotspot.name %></b></h4>
            <div class="loading-button stop-hotspot">
              <button class="radius">Stop hotspot</button>
              <span class="loading button disabled radius">
                <i class="icon-rocket-spinner animate-spin"></i> Stopping Hotspot...
              </span>
            </div>
          <% } else { %>
            <div class="loading-button start-hotspot">
              <button class="radius">Start hotspot</button>
              <span class="loading button disabled radius">
                <i class="icon-rocket-spinner animate-spin"></i> Starting Hotspot...
              </span>
            </div>
          <% } %>
          <div class="row hotspot-off">
            <div class="small-2 large-1 columns">
              <input id="hotspot-off" type="checkbox" <% if (settings.hotspot.hotspotOnlyOffline) { %> value="yes" checked <% } %>>
            </div>
            <div class="small-10 large-11 columns">
              <label for="hotspot-off">
                <b>Turn hotspot off when a known network is found in the future.</b>
              </label>
            </div>
          </div>
        </div>
      <% } %>
    </script>

    <div class="show-for-small zebra">
      <a href="#settings/software-plugins"><h1 class="bold" align="center">Apps &amp; Plugins</h1></a>
    </div>
    <div id="software-plugins" class="settings-page">
      <div class="file-upload-view">
        <div class="row upload-buttons">
          <div class="small-12 large-7 medium-centered columns">
            <span class="file-upload-button button success radius expand" style="margin-bottom: 10px">
              <i class="icon-plus"></i> Upload Plugin or App ( <span class="extensions">.zip</span> )
              <input class="file-upload" type="file" name="file" accept="">
            </span>
          </div>
        </div>
        <div class="row upload-progress" style="display:none">
          <div class="small-12 large-10 large-centered columns">
            <div class="progress radius">
              <div class="meter" style="width: 0%"></div>
            </div>
            <div class="progress-message" align="center">
              <i class="icon-rocket-spinner animate-spin"></i> <span></span>
            </div>
          </div>
        </div>
      </div>
      <h3 class="bold">Installed Plugins</h3>
      <div class="element-list installed"></div>
    </div>

    <script type="text/template" id="software-plugings-settings-page-template">
      <% if (plugins.length) { %>
        <% _.each(plugins, function(p){ %>
          <div class="row" data-plugin-id="<%= p.id %>" data-plugin-name="<%= p.name %>">
            <div class="small-10 columns name">
              <%= p.name %>
              <% if (p.verified) { %><i class="icon-ok-circled" title="Verified Plugin"></i><% } %>
              <span class="version">v<%= p.version %></span>
            </div>
            <div class="small-2 columns" align="center">
              <% if (p.can_remove) { %>
                <a href="#" title="Remove" class="delete-link"><i class="icon-trash"></i></a>
              <% } %>
            </div>
          </div>
        <% }) %>
      <% } else { %>
        <div class="empty">
          <i class="icon-puzzle"></i>
          No Plugins or Apps installed
        </div>
      <% } %>
    </script>

    <div id="delete-plugin-modal" class="reveal-modal medium radius" data-reveal>
      <h2 class="bold">Delete Plugin</h2>
      <div class="modal-body">
        <p>
          This will permanently delete the plugin: <b class="name"></b>.
        </p>
        <p>
          Are you sure you want to delete <b class="name"></b>?
        </p>
      </div>
      <div class="modal-actions row">
        <div class="small-12 medium-6 columns">
          <button class="secondary radius expand">No</button>
        </div>
        <div class="small-12 medium-6 columns">
          <div class="loading-button expand">
            <button class="alert radius">Yes, Delete</button>
            <span class="button disabled alert radius loading"><i class="icon-rocket-spinner animate-spin"></i> Deleting...</span>
            <span class="button disabled alert radius failed"><i class="icon-attention"></i> Failed</span>
          </div>
        </div>
      </div>
      <a class="close-reveal-modal">&#215;</a>
    </div>

    <div class="show-for-small zebra">
      <a href="#settings/software-license"><h1 class="bold" align="center">License</h1></a>
    </div>
    <div id="software-license" class="settings-page">
    </div>

    <script type="text/template" id="software-license-settings-page-template">
      <div class="license-info <%= status %>">
        <div class="row">
          <div class="columns small-12 medium-5 large-3">
            <div class="certificate-icon">
              <i class="icon-certificate"></i>
              <div class="status-icon">
                <i class="icon-ok-circled ok"></i>
                <i class="icon-attention nok"></i>
              </div>
            </div>
          </div>
          <div class="columns small-12 medium-7 large-9">
            <% if (status == 'ok') { %>
              <h1 class="bold">License Information</h1>
            <% } else { %>
              <h1 class="bold">No License</h1>
            <% } %>
          </div>
        </div>
        <div class="row">
          <div class="columns">
            <% if (status == 'ok') { %>
              <div class="panel">
                <ul>
                  <li><b>License Id</b>: <span class="can-select"><%= license.license_id %></span></li>
                  <li><b>Issued by</b>: <%= license.issuer %></li>
                  <% if (license.expires) { %>
                    <li><b>Expires</b>: <span data-localtime-format="d MMM, yyyy"><%= (new Date(license.expires * 1000)).toISOString() %></span></li>
                  <% } %>
                </ul>
              </div>
            <% } else { %>
              <div class="panel callout">
                <p>
                  It's ok to use this sofware as long as you got it directly from AstroPrint via our downloads page or by purchasing one
                  of our products.
                </p>
                <p>
                  If the unit was purchased elsewhere and contains this unlicensed software, please <a href="https://astroprint.zendesk.com/hc/en-us/requests/new">report it to us</a>.
                </p>
              </div>
            <% } %>
          </div>
        </div>
      </div>
    </script>

    <div class="show-for-small zebra">
      <a href="#settings/software-update"><h1 class="bold" align="center">Software Update</h1></a>
    </div>
    <div id="software-update" class="settings-page hide" align="center">
      <h4 align="center">
        <b>{{version}}</b> Installed.<br/>
        {% if commit %}
          <small>({{commit}})</small>
        {% endif %}
      </h4>
      <div class="additional-sw-container" style="display:none"></div>
      <div class="loading-button check">
        <button class="success radius">Check for updates</button>
        <span class="button success radius loading"><i class="icon-rocket-spinner animate-spin"></i> Checking...</span>
      </div>
    </div>
    <div id="software-update-modal" class="reveal-modal medium radius" data-reveal>
      <div class="content"></div>
      <a class="close-reveal-modal">&#215;</a>
    </div>

    <script type="text/template" id="software-additional-software-template">
      <h3 class="bold">Additional Installed Core Packages</h3>
      <ul>
        <% _.each(packages, function(pkg) { %>
          <li>v<%= [pkg.version.major, pkg.version.minor, pkg.version.build].join('.') %> - <%= pkg.variant ? pkg.variant.name : pkg.package.name + ' Package' %></li>
        <% }) %>
      </ul>
    </script>

    <script type="text/template" id="software-system-outdated-template">
      <div data-alert class="alert-box alert radius">
        <h3 style="color:white"><i class="icon-attention"></i> Warning</h3>
        <p align="left">
          Your Operating System version (<%= dist_version %>) is <b>outdated</b>. Some features might not work properly after upgrading. We <b>recommend</b> that you update your system by reflashing a new image from our <u><a href="https://www.astroprint.com/downloads" target="_downloads">Downloads Page</a></u>
        </p>
      </div>
    </script>

    <script type="text/template" id="software-update-modal-content">
      <h2 class="bold">
        <% if (data.update_available) { %> Update <% } else { %> No Updates <% } %> Available
      </h2>
      <div class="modal-body">
        <% _.each(data.releases, function(pkg) { %>
          <% if (pkg.update_available) { %>
            <div class="package-info">
              <h4 class="bold"><i class="<%= pkg.is_current ? 'icon-ok-circled' : 'icon-attention' %>"></i> <%= pkg.name %></h4>
              <ul>
                <% if (pkg.is_current) { %>
                  <li> Up-to-date: <b><%= pkg.release.major+'.'+pkg.release.minor+'('+pkg.release.build+')'%></b></li>
                <% } else { %>
                  <li>Version: <big class="bold"><%= pkg.release.major+'.'+pkg.release.minor+'('+pkg.release.build+')'%></big></li>
                  <li>Published: <b><%= pkg.release.date ? date_format(new Date(pkg.release.date)) : 'Not Published.' %></b></li>
                <% } %>
                <% if (pkg.release.force_setup) { %>
                  <li><i class="icon-attention"></i> You would need to complete the setup wizard after installing this release.</li>
                <% } %>
                <% if (!pkg.is_current) { %>
                  <li class="rel-notes">
                    <b>Release Notes:</b><br/>
                    <div>
                      <%= pkg.release.release_notes %>
                    </div>
                  </li>
                <% } %>
              </ul>
            </div>
          <% } %>
        <% }) %>
      </div>
      <div class="modal-actions row">
        <% if (data.update_available) { %>
          <div class="small-12 medium-6 columns">
            <button class="secondary radius cancel expand">Cancel</button>
          </div>
          <div class="small-12 medium-6 columns">
            <div class="loading-button expand">
              <button class="success radius go">Update</button>
              <span class="button disabled success radius loading">
                <i class="icon-rocket-spinner animate-spin"></i> Initiating...<span>
              </span>
            </div>
          </div>
        <% } else { %>
          <div class="columns">
            <button class="secondary radius cancel expand">Close</button>
          </div>
        <% } %>
      </div>
    </script>

    <div class="show-for-small zebra software">
      <a href="#settings/software-advanced"><h1 class="bold" align="center">Advanced Settings</h1></a>
    </div>

    <div id="software-advanced" class="settings-page hide" align="center"></div>

    <script type="text/template" id="software-advanced-content-template">
      {% if mfDefinition.variant.change_update_channel %}
        <h4 class="bold">Update Channel</h4>
        <select class="update-channel">
          <option value="10">Beta</option>
          <option value="20">Production</option>
        </select>
        <hr/>
      {% endif %}
      <h4 class="bold">API Key</h4>
      <div class="apiKey"><%= data.apiKey.key %></div>
      <div class="row collapse apikey-regenerate">
        <div class="small-2 large-1 columns">
          <input id="apikey-regenerate" type="checkbox" <% if (data.apiKey.regenerate) { %> value="yes" checked <% } %>>
        </div>
        <div class="small-10 large-11 columns">
          <label for="apikey-regenerate">
            <b>Regenerate API Key on Reboot <small>(Improves security)</small>.</b>
          </label>
        </div>
      </div>
      <hr/>
      <h4 class="bold">Factory Settings</h4>
      <button class="alert radius" data-reveal-id="restore-confirm-modal">Restore Factory Settings</button>
      <hr/>
      <h4 class="bold">Logs</h4>
      <button class="secondary radius" data-reveal-id="send-logs-modal">Send logs to AstroPrint</button><br/>
      Size of logs directory: <span class="size bold"><%= size_format(data.sizeLogs) %></span> <button class="secondary radius tiny" data-reveal-id="delete-logs-modal">Clear</button>
      <div class="row serial-container">
        <div class="small-2 large-1 columns">
          <input id="serial-logs" type="checkbox" <% if (data.serialActivated) { %> value="yes" checked <% } %>/>
        </div>
        <div class="small-10 large-11 columns">
          <label for="serial-off">
            <b>
              Turn on serial logs.
            </b>
            <i class="icon-attention"></i>You should only use this while helping solve a
              communication problem with your printer. This generates a large amount of data.
          </label>
        </div>
      </div>
    </script>

    <div id="restore-confirm-modal" class="reveal-modal medium radius" data-reveal>
      <h2 class="bold">Are you sure?</h2>
      <div class="modal-body">
        <p>This will delete all your settings and files from this {{mfDefinition.variant.product_name}}.</p>
        <p>
          <label for="confirmation">
            <b>Write "RESET" to confirm</b>
            <input type="text"/>
          </label>
        </p>
      </div>
      <div class="modal-actions row">
        <div class="small-12 medium-6 columns">
          <button class="secondary radius expand">Cancel</button>
        </div>
        <div class="small-12 medium-6 columns">
          <div class="loading-button expand">
            <button class="alert radius">Reset</button>
            <span class="button disabled alert radius loading"><i class="icon-rocket-spinner animate-spin"></i> Resetting...</span>
          </div>
        </div>
      </div>
      <a class="close-reveal-modal">&#215;</a>
    </div>

    <div id="send-logs-modal" class="reveal-modal medium radius" data-reveal>
      <h2 class="bold">Send logs to AstroPrint</h2>
      <div class="modal-body">
        <p>This sends us your device logs so we can help analyze your problem.</p>
        <p>
          <label>
            Do you have a support ticket? If not, consider <a href="https://astroprint.zendesk.com" target="_support">creating one</a>.
            <input type="text" name="ticket" placeholder="Enter support ticket # or leave empty"/>
          </label>
          <textarea name="message" placeholder="Let us know what's going on (optional)"></textarea>
        </p>
      </div>
      <div class="modal-actions row">
        <div class="small-12 medium-6 columns">
          <button class="secondary radius expand">Cancel</button>
        </div>
        <div class="small-12 medium-6 columns">
          <div class="loading-button expand">
            <button class="success radius">Send Logs</button>
            <span class="button disabled success radius loading"><i class="icon-rocket-spinner animate-spin"></i> Sending...</span>
          </div>
        </div>
      </div>
      <a class="close-reveal-modal">&#215;</a>
    </div>

    <div id="delete-logs-modal" class="reveal-modal medium radius" data-reveal>
      <h2 class="bold">Delete AstroPrint logs</h2>
      <div class="modal-body">
        <p>
          This will delete all your past AstroPrint logs. It will help save space but might
          prevent us from researching a past problem you might have had.
        </p>
        <p>
          Are you sure you want to delete all logs?
        </p>
      </div>
      <div class="modal-actions row">
        <div class="small-12 medium-6 columns">
          <button class="secondary radius expand">Cancel</button>
        </div>
        <div class="small-12 medium-6 columns">
          <div class="loading-button expand">
            <button class="alert radius">Delete Logs</button>
            <span class="button disabled alert radius loading"><i class="icon-rocket-spinner animate-spin"></i> Deleting...</span>
          </div>
        </div>
      </div>
      <a class="close-reveal-modal">&#215;</a>
    </div>

    <div id="printer-selector-modal" class="reveal-modal medium radius" data-reveal align="center">
      <h2 class="bold">Set Printer Model</h2>
      <div class="content"></div>
      <script type="text/template" id="printer-selector-modal-content">
        <div class="modal-actions row">
            <% if (!manufacturerLocked) { %>
            <div class="small-12 medium-12 columns">
              <!-- Manufacturers -->
              <label for="manufacturers-picker" class="bold">
                1. Choose manufacturer
                <select id="manufacturers-picker" name="driver">
                  <% _.each(manufacturers, function(m) { %>
                    <option value="<%= m.id %>" <%= mSelected == m.id ? ' selected' : '' %>  ><%= m.name %></option>
                  <% }) %>
                </select>
              </label>
            </div>
            <% } %>

            <div class="small-12 medium-12 columns">
              <!-- Printers -->
              <label for="printer-model-picker" class="bold">
                <% if (!manufacturerLocked) { %> 2.<% } %> Pick a Printer
                <select id="printer-model-picker" name="driver">
                  <% _.each(printers, function(p) { %>
                    <option value="<%= p.id %>" <%= pSelected == p.id ? ' selected' : '' %> ><%= p.name %></option>
                  <% }) %>
                </select>
              </label>
            </div>
          </div>
      </script>
      <div class="modal-actions row">
        <div class="small-12 medium-6 columns">
          <button class="secondary radius expand">Cancel</button>
        </div>
        <div class="small-12 medium-6 columns">
          <div class="loading-button expand">
            <button class="success radius set-printer">Set</button>
            <span class="button disabled alert radius loading"><i class="icon-rocket-spinner animate-spin"></i> Setting...</span>
          </div>
        </div>
      </div>
      <a class="close-reveal-modal">&#215;</a>
      </div>

    <div id="filament-selector-modal" class="reveal-modal tiny radius" data-reveal align="center">
      <h2 class="bold">Set Filament info</h2>
          <form data-abide="ajax">
          <script type="text/template" id="filament-selector-modal-content">

            <div class="columns small-8">
              <div class="input-wrapper">
                <label for="filament_name" class="text-left">
                  Filament Name
                </label>
                <input class="radius" id="filament_name" name="filament_name" type="text" value="<%= name %>" pattern required autocomplete="off"/>
                <small class="error">Please provide a valid name</small>
              </div>
            </div>

            <div class="columns small-4 more-colors">
              <input id="filament_color" type="color" name="filament_color" value="<%= color %>" pattern="colorCode" required autocomplete="off"/>
              <i class="icon-pencil"></i>
              <small class="error">Please provide a valid color code</small>
            </div>

            <div class="columns small-12 text-center">
              <% _.each(colors, function(color) { %>
                <div data-color="<%=color%>" class="paletecolor" style="background-color:<%=color%>"></div>
              <% }) %>
            </div>

          </script>
          <div class="content clearfix">
          </div>
          <div class="small-6 columns">
            <button class="secondary bold radius small expand">Cancel</button>
          </div>
          <div class="small-6 columns loading-button right">
            <button class="success small bold expand radius">Save</button>
            <span class="loading button small bold expand radius success disabled"><i class="icon-rocket-spinner animate-spin"></i> Saving...</span>
          </div>
        </form>
      <a class="close-reveal-modal">&#215;</a>
    </div>

    <div id="unlink-printer-dlg" class="reveal-modal medium" data-reveal>
      <h2 class="bold">Unlink Printer Profile</h2>
      <div class="reveal-content text-center">
        <p>Are your sure you want to unlink <span class="bold printer-name"></b>{{printer}}</span> from your profile?</p>
          <div class="button-container">
          <button class="radius secondary left cancel">Cancel</button>
          <div class="loading-button right unlink-button">
            <button class="alert radius">Unlink</button>
            <span class="loading button disabled alert radius"><i class="icon-rocket-spinner animate-spin"></i> Unlinking...</span>
            <span class="failed button disabled alert radius"><i class="icon-attention"></i> Failed</span>
          </div>
          <div class="clearfix"></div>
          </div>
      </div>
      <a class="close-reveal-modal">&#215;</a>
    </div>

    <div id="unlink-filament-dlg" class="reveal-modal medium" data-reveal>
      <h2 class="bold">Unlink Filament Info</h2>
      <div class="reveal-content text-center">
        <p>Are your sure you want to unlink <span class="bold filament-name"></b>{{filament}}</span>?</p>
          <div class="button-container">
          <button class="radius secondary left cancel">Cancel</button>
          <div class="loading-button right unlink-button">
            <button class="alert radius">Unlink</button>
            <span class="loading button disabled alert radius"><i class="icon-rocket-spinner animate-spin"></i> Unlinking...</span>
            <span class="failed button disabled alert radius"><i class="icon-attention"></i> Failed</span>
          </div>
          <div class="clearfix"></div>
          </div>
      </div>
      <a class="close-reveal-modal">&#215;</a>
    </div>
  </div>
</div>
